<template>
    <div class="timeLine">
        <CommonTitleComponent text="监控信息"></CommonTitleComponent>
        <div class="fromDataClass">
            <el-select v-model="state.formData.company" class="formSelect" placeholder="请选择企业">
                <el-option
                    v-for="item in state.formData.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <div class="formDatePicker">
                <el-date-picker
                    v-model="state.formData.timeDate"
                    style="width: 100%"
                    class="selectClass"
                    type="date"
                    :teleported="false"
                    placeholder="请选择日期"
                />
            </div>
        </div>
        <div class="timeLineContainer">
            <el-scrollbar>
                <el-timeline>
                    <el-timeline-item
                        v-for="(item, index) in state.timeLine"
                        :key="index"
                        :timestamp="item.c0"
                        placement="top"
                        color="#0E96FF"
                    >
                        <ul>
                            <li>
                                <span>企业：</span>
                                {{ item.c1 }}
                            </li>
                            <li>
                                <span>固废产生量：</span>
                                {{ item.c2 }}
                            </li>
                            <li>
                                <span>运输目的地：</span>
                                {{ item.c3 }}
                            </li>
                            <li>
                                <span>车牌号：</span>
                                {{ item.c4 }}
                            </li>
                            <li>
                                <span>驾驶人：</span>
                                {{ item.c5 }}
                            </li>
                        </ul>
                    </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const state = reactive({
    /* 表单值 */
    formData: {
        options: [
            { label: '达冠生化', value: 1 },
            { label: '力强化工', value: 2 }
        ],
        company: '',
        timeDate: ''
    },
    /* 时间线 */
    timeLine: [
        {
            c0: '2022-06-23',
            c1: '达冠生化',
            c2: '24.32',
            c3: 'XXX目的地',
            c4: '鲁CM9552',
            c5: '刘某某'
        },
        {
            c0: '2022-06-24',
            c1: '力强化工',
            c2: '14.18',
            c3: 'XXX目的地',
            c4: '鲁CM9552',
            c5: '刘某某'
        },
        {
            c0: '2022-06-25',
            c1: '达冠生化',
            c2: '24.32',
            c3: '山东中再生环境科技有限公',
            c4: '鲁CM7715',
            c5: '石朝应'
        },
        {
            c0: '2022-06-26',
            c1: '达冠生化',
            c2: '24.32',
            c3: 'XXX目的地',
            c4: '鲁CM9552',
            c5: '刘某某'
        },
        {
            c0: '2022-06-27',
            c1: '达冠生化',
            c2: '24.32',
            c3: '山东中再生环境科技有限公',
            c4: '鲁CM7715',
            c5: '石朝应'
        }
    ]
});
</script>

<style scoped lang="scss">
.timeLine {
    margin-top: 20px;
    height: calc(100% - 27% - 80px);

    .fromDataClass {
        display: flex;
        margin-top: 20px;
        ::v-deep(.el-input__wrapper) {
            @include input_wrapper();
        }
        .formSelect,
        ::v-deep(.formDatePicker) {
            width: 50% !important;
        }
        .formSelect {
            margin-right: 14px;
        }
    }

    .timeLineContainer {
        margin-top: 20px;
        height: calc(100% - 90px);
        ::v-deep(.el-timeline-item__tail) {
            border-color: #0e96ff;
            border-left-style: dashed;
        }
        ::v-deep(.el-timeline) {
            padding-left: 5px;
        }
        ::v-deep(.el-timeline-item__timestamp) {
            color: #0e96ff;
            font-size: 14px;
            margin-bottom: 12px;
        }
        ul {
            height: max-content;
            li {
                color: #fff;
                font-size: 12px;
                padding-bottom: 16px;
                &:last-of-type {
                    padding-bottom: 6px;
                }
                span {
                    color: #b7bdbf;
                }
            }
        }
    }
}
</style>
